<template>
  <div class="page-container">
    <!-- 主内容卡片 -->
    <div class="main-card">
      <!-- 页面标题栏 -->
      <div class="page-header">
        <div class="title-section">
          <div class="title-line"></div>
          <h1 class="page-title">科室管理</h1>
        </div>
        <div class="action-buttons">
          <el-button class="action-btn export-btn" @click="exportToExcel">导出</el-button>
           <el-dropdown @command="handleImportCommand">
          <el-button class="action-btn export-btn">
            <el-icon><Upload /></el-icon>
            导入
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="import">
                <el-icon><Upload /></el-icon>
                导入Excel文件
              </el-dropdown-item>
              <el-dropdown-item command="template">
                <el-icon><Download /></el-icon>
                下载导入模板
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
          <el-button class="action-btn delete-btn" @click="handleBatchDelete">删除</el-button>
          <el-button class="action-btn primary-btn" @click="dialogVisible = true" style="width: 150px;">新增科室信息</el-button>
        </div>
      </div>

      <!-- 搜索区域 -->
      <div class="search-section">
        <el-form :inline="true" :model="formInline" class="search-form">
          <el-form-item label="上级科室" prop="parentId">
            <el-select v-model="formInline.parentId" placeholder="请选择科室" class="search-select">
              <el-option v-for="value in tableData" :label="value.departmentName" :value="value.departmentId" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input 
              v-model="formInline.departmentName" 
              placeholder="请输入医生姓名" 
              clearable 
              class="search-input"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="search-btn" @click="Xian">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格区域 -->
      <div class="table-container">
        <el-table 
          :data="tableData" 
          class="custom-table"
          :header-cell-style="{ backgroundColor: '#fafafa', color: '#333', fontWeight: '500' }"
          :cell-style="{ padding: '12px 8px' }"
          stripe
          border
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="departmentName" label="科室名称" width="120" show-overflow-tooltip />
          <el-table-column prop="hospitalCampus" label="所属院区" width="120" show-overflow-tooltip />
          <el-table-column prop="superiorDepartment" label="上级科室" width="120" show-overflow-tooltip />
          <el-table-column prop="departmentAdd" label="科室位置" width="180" show-overflow-tooltip />
          <el-table-column prop="departmentStatus" label="科室状态" width="120" align="center">
            <template v-slot="scope">
              <el-tag :type="scope.row.departmentStatus ? 'success' : 'info'" size="small">
                {{ scope.row.departmentStatus ? "有人" : "没人" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140" align="center" fixed="right">
            <template v-slot="scope">
              <div class="action-buttons">
                <el-button 
                  type="primary" 
                  size="small" 
                  :icon="Edit" 
                  circle 
                  @click="Update(scope.row)"
                  title="编辑"
                />
                <el-button 
                  type="danger" 
                  size="small" 
                  :icon="Delete" 
                  circle 
                  @click="Shan(scope.row.departmentId)"
                  title="删除"
                />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页区域 -->
      <div class="pagination-section">
        <el-pagination
          v-model:current-page="page.pageIndex"
          v-model:page-size="page.pageSize"
          :page-sizes="[5, 10,15, 20]"
          prev-text="上一页" 
          next-text="下一页"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalCount"
          class="pagination"
        />
      </div>
    </div>
  </div>

  <!-- 新增 -->
<el-dialog
    v-model="dialogVisible"
    title="信息"
    width="500"
  >
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    label-width="auto"
  >

      <el-form-item label="科室名称" prop="productBatch">
      <el-input v-model="ruleForm.departmentName" />
    </el-form-item>

     <el-form-item label="所属院区" prop="productBatch">
       <el-select v-model="ruleForm.hospitalCampus" placeholder="请选择">
        <el-option label="东院区" value="东院区" />
        <el-option label="北院区" value="北院区" />
         <el-option label="湘南院区" value="湘南院区" />
      </el-select>
    </el-form-item>

     <el-form-item label="上级科室" prop="parentId">
      <el-select v-model="ruleForm.parentId" placeholder="请选择">
        <el-option v-for="value in tableData" :label="value.departmentName" :value="value.departmentId" />
      </el-select>
    </el-form-item>

     <el-form-item label="科室位置" prop="productBatch">
      <el-input v-model="ruleForm.departmentAdd" />
    </el-form-item>

    <el-form-item label="科室状态" prop="delivery">
      <el-switch v-model="ruleForm.departmentStatus" />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        保存
      </el-button>
      <el-button @click="Qu">
        取消
      </el-button>
    </el-form-item>
  </el-form>
  </el-dialog>

    <!-- 修改 -->
<el-dialog
    v-model="UpdatedialogVisible"
    title="信息"
    width="500"
  >
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    label-width="auto"
  >

      <el-form-item label="科室名称" prop="productBatch">
      <el-input v-model="ruleForm.departmentName" />
    </el-form-item>

     <el-form-item label="所属院区" prop="productBatch">
       <el-select v-model="ruleForm.hospitalCampus" placeholder="请选择">
        <el-option label="东院区" value="东院区" />
        <el-option label="北院区" value="北院区" />
         <el-option label="湘南院区" value="湘南院区" />
      </el-select>
    </el-form-item>

     <el-form-item label="上级科室" prop="parentId">
      <el-select v-model="ruleForm.parentId" placeholder="请选择">
        <el-option v-for="value in tableData" :label="value.departmentName" :value="value.departmentId" />
        <!-- <el-option label="外科" value="外科" />
         <el-option label="妇科" value="妇科" />
          <el-option label="男科" value="男科" /> -->
      </el-select>
    </el-form-item>

     <el-form-item label="科室位置" prop="productBatch">
      <el-input v-model="ruleForm.departmentAdd" />
    </el-form-item>

    <el-form-item label="科室状态" prop="delivery">
      <el-switch v-model="ruleForm.departmentStatus" />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="UpdatesubmitForm">
        保存
      </el-button>
      <el-button @click="Qu">
        取消
      </el-button>
    </el-form-item>
  </el-form>
  </el-dialog>

  <!-- 导入进度对话框 -->
  <el-dialog
    v-model="importProgressVisible"
    title="导入进度"
    width="500"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <div class="import-progress-container">
      <div class="progress-info">
        <p>正在导入科室数据，请稍候...</p>
        <p class="progress-text">{{ importProgress.current }} / {{ importProgress.total }}</p>
      </div>
      <el-progress 
        :percentage="importProgress.percentage" 
        :status="importProgress.status"
        :stroke-width="8"
      />
      <div class="progress-details">
        <p>成功: {{ importProgress.success }} 条</p>
        <p>失败: {{ importProgress.error }} 条</p>
      </div>
    </div>
    <template #footer>
      <el-button 
        v-if="importProgress.status === 'success' || importProgress.status === 'exception'"
        type="primary" 
        @click="closeImportProgress"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { dataRead, dataWrite } from '@/Utils/Http';
import { onMounted, reactive, ref, watch } from 'vue';
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
import * as XLSX from 'xlsx';
import { Edit, Delete } from '@element-plus/icons-vue';
const route=useRoute();
const router=useRouter();
const tableData =ref<any>([])
const page=reactive({
  pageIndex:1,
  pageSize:5,
  totalCount:0,
  pageCount:0,
})
const formInline = reactive({
  parentId: '',
  departmentName: '',
})
watch(page,()=>{
  Xian()
})
onMounted(()=>{
  Xian();
})
const Xian=()=>{
  dataRead.get("/Manage/DepartmentsShow",{
    params:{
      pageIndex:page.pageIndex,
      pageSize:page.pageSize,
      departmentName:formInline.departmentName,
      parentId:formInline.parentId,
    }
  })
  .then(res=>{
    tableData.value=res.data.data.data;
    page.totalCount=res.data.data.totalCount;
    page.pageCount=res.data.data.pageCount;
  })
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({
    departmentId:'',
  "departmentName": "",
  "hospitalCampus": "",
  parentId:0,
  "superiorDepartment": "",
  "departmentAdd": "",
  "departmentStatus": false,
  "isdelete": false
})

const dialogVisible = ref(false)
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
     dataWrite.post("/Manage/DepartmentsAdd",ruleForm.value)
     .then(res=>{
      if(res.data.code==300)
     {
      ruleForm.value={
        departmentId:'',
        "departmentName": "",
        "hospitalCampus": "",
         parentId:0,
        "superiorDepartment": "",
        "departmentAdd": "",
        "departmentStatus": false,
        "isdelete": false
      }
      ElMessage.success(res.data.message)
      dialogVisible.value=false;
      Xian()
     }
     else
     {
         ElMessage.error(res.data.message)
     }
     })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const Qu=()=>{
location.href="/Departments"
}

//删除
const Shan=(departmentId:any)=>{
  ElMessageBox.confirm(
    '确定删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      dataWrite.delete("/Manage/DepartmentsDel",{
        data:{
          departmentId:departmentId,
        }
      })
     .then(res=>{
      if(res.data.code==500)
     {
      ElMessage.success(res.data.message)
      Xian()

     }
     else
     {
         ElMessage.error(res.data.message)
     }
     })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const UpdatedialogVisible=ref(false);
const Update=(row:any)=>{
  ruleForm.value.departmentId=row.departmentId;
  ruleForm.value.departmentName=row.departmentName;
  ruleForm.value.hospitalCampus=row.hospitalCampus;
  ruleForm.value.parentId=row.parentId;
  ruleForm.value.superiorDepartment=row.superiorDepartment;
  ruleForm.value.departmentAdd=row.departmentAdd;
  ruleForm.value.departmentStatus=row.departmentStatus;
  UpdatedialogVisible.value=true;
}
const UpdatesubmitForm=()=>{
   dataWrite.put("/Manage/DepartmentsUpdate",ruleForm.value)
     .then(res=>{
      if(res.data.code==400)
     {
      ruleForm.value={
        departmentId:'',
        "departmentName": "",
        "hospitalCampus": "",
         parentId:0,
        "superiorDepartment": "",
        "departmentAdd": "",
        "departmentStatus": false,
        "isdelete": false
      }
      ElMessage.success(res.data.message)
      UpdatedialogVisible.value=false;
      Xian()
     }
     else
     {
         ElMessage.error(res.data.message)
     }
     })
}

// 导出Excel功能
const exportToExcel = async () => {
  try {
    // 获取全部数据
    const response = await dataRead.get("/Manage/DepartmentsShow", {
      params: {
        pageIndex: 1,
        pageSize: 999999 // 设置一个很大的值来获取所有数据
      }
    });
    
    const allData = response.data.data.data;
    
    // 准备导出数据，转换数据格式
    const exportData = allData.map((item: any) => ({
      '科室名称': item.departmentName,
      '所属院区': item.hospitalCampus,
      '上级科室': item.parentId,
      '科室位置': item.departmentAdd,
      '科室状态': item.departmentStatus ? '有人' : '没人'
    }));
    
    // 创建工作簿
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.json_to_sheet(exportData);
    
    // 设置列宽
    ws['!cols'] = [
      { wch: 15 }, // 科室名称
      { wch: 15 }, // 所属院区
      { wch: 15 }, // 上级科室
      { wch: 20 }, // 科室位置
      { wch: 12 }  // 科室状态
    ];
    
    // 添加工作表到工作簿
    XLSX.utils.book_append_sheet(wb, ws, '科室信息');
    
    // 生成文件名
    const fileName = `科室信息_${new Date().toISOString().slice(0, 10)}.xlsx`;
    
    // 导出文件
    XLSX.writeFile(wb, fileName);
    
    ElMessage.success('导出成功！');
  } catch (error) {
    console.error('导出失败:', error);
    ElMessage.error('导出失败，请重试！');
  }
};

// 批量删除处理
const handleBatchDelete = () => {
  ElMessage.info('批量删除功能待实现');
};

const importProgressVisible = ref(false)
const importProgress = reactive({
  current: 0,
  total: 0,
  success: 0,
  error: 0,
  percentage: 0,
  status: 'normal' as 'normal' | 'success' | 'exception'
})


// 处理导入命令
const handleImportCommand = (command: string) => {
  if (command === 'import') {
    importFromExcel()
  } else if (command === 'template') {
    downloadImportTemplate()
  }
}

// 下载导入模板
const downloadImportTemplate = () => {
  try {
    // 创建模板数据
    const templateData = [
      {
        '科室名称': '刚发的',
        '所属院区': '东院区',
        '父级Id': '0',
        '上级科室': '但是发过的',
        '科室位置': '一楼',
        '科室状态': 'true',
        '删除标志': 'false',
      },
    ]
    
    // 创建工作簿
    const wb = XLSX.utils.book_new()
    const ws = XLSX.utils.json_to_sheet(templateData)
    
    // 设置列宽
    const colWidths = [
      { wch: 12 }, // 医生名称
      { wch: 12 }, // 所属院区
      { wch: 12 }, // 医生职称
      { wch: 20 }, // 医生标签
      { wch: 10 }, // 挂号费
      { wch: 10 }, // 诊查费
      { wch: 30 }, // 简介
    ]
    ws['!cols'] = colWidths
    
    // 添加工作表到工作簿
    XLSX.utils.book_append_sheet(wb, ws, '科室信息模板')
    
    // 生成文件名
    const fileName = '科室信息导入模板.xlsx'
    
    // 导出文件
    XLSX.writeFile(wb, fileName)
    
    ElMessage.success('模板下载成功！请按照模板格式填写数据')
    
  } catch (error) {
    console.error('模板下载失败:', error)
    ElMessage.error('模板下载失败，请稍后重试')
  }
}

// 导入Excel功能
const importFromExcel = () => {
  // 创建文件输入元素
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.xlsx,.xls'
  input.style.display = 'none'
  
  input.onchange = async (event: any) => {
    const file = event.target.files[0]
    if (!file) return
    
    try {
      ElMessage.info('正在解析文件，请稍候...')
      
      // 读取文件
      const data = await file.arrayBuffer()
      const workbook = XLSX.read(data, { type: 'array' })
      
      // 获取第一个工作表
      const sheetName = workbook.SheetNames[0]
      const worksheet = workbook.Sheets[sheetName]
      
      // 转换为JSON格式
      const jsonData = XLSX.utils.sheet_to_json(worksheet)
      
      if (jsonData.length === 0) {
        ElMessage.warning('Excel文件中没有数据')
        return
      }
      
      // 转换数据格式
      const importData = convertImportData(jsonData)
      
      // 确认导入
      ElMessageBox.confirm(
        `检测到 ${importData.length} 条科室数据，确定要导入吗？`,
        '确认导入',
        {
          confirmButtonText: '确定导入',
          cancelButtonText: '取消',
          type: 'info',
        }
      ).then(async () => {
        await batchImportDoctors(importData)
      }).catch(() => {
        ElMessage.info('已取消导入')
      })
      
    } catch (error) {
      console.error('导入失败:', error)
      ElMessage.error('文件解析失败，请检查文件格式')
    } finally {
      // 清理文件输入元素
      document.body.removeChild(input)
    }
  }
  
  // 触发文件选择
  document.body.appendChild(input)
  input.click()
}
// 转换导入数据格式
const convertImportData = (data: any[]) => {
  return data.map(row => ({
    DepartmentName: row['科室名称']?.toString().trim() || '',
    HospitalCampus: row['所属院区']?.toString().trim() || '',
    parentId: row['父级Id']?.toString().trim() || '',
    SuperiorDepartment: row['上级科室']?.toString().trim() || '',
    DepartmentAdd: row['科室位置']?.toString().trim() || '',
    DepartmentStatus: row['科室状态']?.toString().trim() === '有人' || true,
  }))
}

// 批量导入医生数据
const batchImportDoctors = async (importData: any[]) => {
  try {
    // 初始化进度
    importProgress.current = 0
    importProgress.total = importData.length
    importProgress.success = 0
    importProgress.error = 0
    importProgress.percentage = 0
    importProgress.status = 'normal'
    importProgressVisible.value = true
    
    const errors: string[] = []
    
    // 逐个导入医生数据
    for (let i = 0; i < importData.length; i++) {
      try {
        const doctorData = importData[i]
        
        // 调用后端接口添加医生
        const response = await dataWrite.post("/Manage/DepartmentsAdd", doctorData)
        
        if (response.data.code === 300) {
          importProgress.success++
        } else {
          importProgress.error++
          errors.push(`第${i + 1}条数据导入失败：${response.data.message}`)
        }
      } catch (error) {
        importProgress.error++
        errors.push(`第${i + 1}条数据导入失败：网络错误`)
      }
      
      // 更新进度
      importProgress.current = i + 1
      importProgress.percentage = Math.round(((i + 1) / importData.length) * 100)
      
      // 添加小延迟，让用户能看到进度变化
      await new Promise(resolve => setTimeout(resolve, 100))
    }
    
    // 设置最终状态
    if (importProgress.error === 0) {
      importProgress.status = 'success'
    } else if (importProgress.success === 0) {
      importProgress.status = 'exception'
    } else {
      importProgress.status = 'exception' // 部分成功也显示为异常状态
    }
    
    // 显示导入结果
    if (importProgress.success > 0) {
      ElMessage.success(`成功导入 ${importProgress.success} 条医生数据`)
      Xian() // 刷新列表
    }
    
    if (importProgress.error > 0) {
      ElMessage.warning(`有 ${importProgress.error} 条数据导入失败`)
      console.error('导入错误详情:', errors)
    }
    
    // 如果有错误，显示详细错误信息
    if (errors.length > 0) {
      setTimeout(() => {
        ElMessageBox.alert(
          errors.slice(0, 10).join('\n') + (errors.length > 10 ? `\n...还有${errors.length - 10}个错误` : ''),
          '导入错误详情',
          {
            confirmButtonText: '确定',
            type: 'error'
          }
        )
      }, 1000)
    }
    
  } catch (error) {
    console.error('批量导入失败:', error)
    importProgress.status = 'exception'
    ElMessage.error('批量导入失败，请稍后重试')
  }
}

// 关闭导入进度对话框
const closeImportProgress = () => {
  importProgressVisible.value = false
  // 重置进度数据
  importProgress.current = 0
  importProgress.total = 0
  importProgress.success = 0
  importProgress.error = 0
  importProgress.percentage = 0
  importProgress.status = 'normal'
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

.main-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin: 0 auto;
  max-width: 1200px;
}

/* 页面标题栏样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.title-section {
  display: flex;
  align-items: center;
}

.title-line {
  width: 4px;
  height: 24px;
  background-color: #409eff;
  margin-right: 12px;
  border-radius: 2px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.action-btn {
  border-radius: 6px;
  font-size: 14px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.export-btn, .delete-btn {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.export-btn:hover, .delete-btn:hover {
  background-color: #bae7ff;
  color: #096dd9;
}

.primary-btn {
  background-color: #409eff;
  color: white;
  font-weight: 500;
}

.primary-btn:hover {
  background-color: #337ecc;
}

/* 搜索区域样式 */
.search-section {
  margin-bottom: 24px;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 6px;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

.search-select, .search-input {
  width: 200px;
}

.search-select .el-input__wrapper {
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  background-color: white;
}

.search-input .el-input__wrapper {
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  background-color: white;
}

.search-btn {
  background-color: #409eff;
  border-color: #409eff;
  border-radius: 6px;
  padding: 8px 20px;
}

.search-btn:hover {
  background-color: #337ecc;
  border-color: #337ecc;
}

/* 表格样式 */
.table-container {
  background: white;
  border-radius: 6px;
  overflow: hidden;
}

.custom-table {
  width: 100%;
}

.custom-table :deep(.el-table__header-wrapper) {
  background-color: #fafafa;
}

.custom-table :deep(.el-table__header th) {
  background-color: #fafafa !important;
  color: #333 !important;
  font-weight: 500 !important;
  border-bottom: 1px solid #e8e8e8 !important;
  padding: 12px 8px !important;
}

.custom-table :deep(.el-table__body tr) {
  transition: background-color 0.3s ease;
}

.custom-table :deep(.el-table__body tr:hover) {
  background-color: #f5f7fa !important;
}

.custom-table :deep(.el-table__body td) {
  padding: 12px 8px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.custom-table :deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #fafafa;
}

.custom-table :deep(.el-table__border) {
  border: 1px solid #e8e8e8;
}

.custom-table :deep(.el-table__border::after) {
  background-color: #e8e8e8;
}

.custom-table :deep(.el-table__inner-wrapper::before) {
  background-color: #e8e8e8;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.action-buttons .el-button {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-buttons .el-button:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}
/* 分页区域样式 */
.pagination-section {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.pagination {
  --el-pagination-bg-color: transparent;
  --el-pagination-text-color: #606266;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-container {
    padding: 10px;
  }
  
  .main-card {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .action-buttons {
    width: 100%;
    justify-content: flex-end;
  }
  
  .search-form {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .search-select, .search-input {
    width: 100%;
  }
  
  .table-container {
    overflow-x: auto;
  }
  
  .custom-table {
    min-width: 800px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .action-buttons .el-button {
    width: 28px;
    height: 28px;
  }
}
</style>
